<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>登录</title>
		<script type="text/javascript" src="js/vue-2.6.10.js"></script>
		<script type="text/javascript" src="js/axios.js"></script>
		<style type="text/css">
			body,h2 p,input{
				margin:0; 
				padding:0;
				border:0;
			}
			body{
				font-family:"microsoft yahei" ;
				 font-size:14px;
			}
			a{
				color:#999;
				text-decoration: none;
			}
			header{
				width: 1030px;
				height: 70px; 
				margin: 0 auto;
			}
			header .hleft {
				float: left; 
				width:128px; 
				height:70px;
			}
			header .hright {
				float: right;
				height: 70px;
				line-height:70px;
				background: url(../images/inf.jpg) no-repeat left center;
			}
			header .hright a {padding-left:35px;}
			#mainlogin {
				width: 100%;
				height:600px;
				background-color: #cfeeee;
			}
			.loginbg {
				width:1030px;
				height:600px;
				background:url(../images/loginbg.jpg);
				margin: 0 auto;
				box-sizing: border-box;
				padding: 140px 0 0 600px;
			}
			.loginf {	/*表单的样式*/	
				width: 300px;
				height:280px;
				padding:20px 30px;
				background: #f5f8fd;
				border-radius: 20px;	/*设置圆角半径*/	
				border: 1px solid #4faccb;
			}
			.loginf p{margin-top:20px;}
			.name,.pass {  /*文本框设置相同的宽度、高度等属性*/
				width: 250px;
				height:24px;
				border: 1px solid #38a1bf;
				border-radius:5px;
				padding: 2px 2px 2px 26px;
			}
			.name {	 /*设置第一个文本框的背景*/
				background: url(../images/1-1.jpg) no-repeat 5px center #FFF;
			}
			.pass{  /*设置第二个文本框的背景*/
				background: url(../images/2-2.jpg) no-repeat 5px center #FFF;
			}
			.btn {  /*设置按钮的样式*/
				width: 278px;
				height: 40px;
				border: 1px solid #6b5d50;
				border-radius: 3px;
				background: #3bb7ea;
				font-size: 20px;
				color:#FFF;
			}
			.reg{font-size:16px;}
			.copyright{
				width: 100%;
				height: 60px;
				background:#333333;
				text-align: center;
			}
			.copyright a {line-height: 60px;}
		</style>
	</head>
	<body>
		<header>
			<div class="hleft"><a href="index.html"><img src="images/logoblue.jpg" alt=""></a></div>
			<div class="hright"><a href="index.html">回首页查看商品信息</a></div>
		</header>
		<div id="mainlogin">
			<div class="loginbg">
				<form class="loginf" action="/FirstWeb/login.do" method="get" autocomplete="on">
					<h2>用户登录</h2>
					<p>
						<input name="username" type="text" class="name" placeholder="邮箱/用户名/手机号">
					</p>
					<p>
						<input name="password" type="password" class="pass" placeholder="密码">
					</p>
					<p>
					<input name="btnlog" type="submit" v-on:click="login()" value="登录" class="btn">
					</p>
					<p class="reg">
						<a href="register.html">用户免费注册</a>
					</p>
				</form>
			</div>
		</div>
		<div class="copyright"> <a href="#">$友情链接$</a> </div>
		<script type="text/javascript">
		let vue = new Vue({
			el: '#from',
			data:{
				username: "",
				password: "",
				msg: ""
			},
			created(){
				
			},methods:{
				login: function(){
					//新建一个FormData对象用于封装数据
					url = '/FirstWeb/login.do?username='+vue.username + '&password=' +vue.password;
					axios.get(url).then(
						function(res_obj){
							vue.msg = "";
							//使用获取的数据来给vue对象中的users数据赋值
							alert("数据结果为：" + res_obj.data);
							if(res_obj.data){
								//设置页面地址为首页
								window.location.href = "home.html";
							}else{
								vue.msg = "账号或密码错误";
							}
						}
					).catch(
						function(error_obj){
							alert("网络加载异常！！！");
						}
					)
					}
				}
			});
			</script>
	</body>
</html>